<!DOCTYPE html>
<html lang="zh-CN" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>@mc-markets/ui</title>

    <!-- 样式 -->
    <style>
      /* 加载动画 */
      .loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--el-bg-color-page);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.3s ease;
      }

      .loading-container.hidden {
        opacity: 0;
        pointer-events: none;
      }

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid var(--el-border-color-light);
        border-top: 4px solid var(--el-color-primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      .loading-text {
        margin-top: 20px;
        color: var(--el-text-color-regular);
        font-size: 14px;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      /* 基础样式重置 */
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        background-color: var(--el-bg-color-page);
        color: var(--el-text-color-primary);
        line-height: 1.6;
      }

      html,
      body,
      #app {
        height: 100%;
      }

      /* 暗色主题支持 */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #141414;
          color: #e5eaf3;
        }

        .loading-container {
          background: #141414;
        }

        .loading-text {
          color: #cfd3dc;
        }
      }

      /* 高对比度模式 */
      @media (prefers-contrast: high) {
        .loading-spinner {
          border-color: #000;
          border-top-color: #0066cc;
        }
      }

      /* 减少动画模式 */
      @media (prefers-reduced-motion: reduce) {
        .loading-spinner {
          animation: none;
        }

        .loading-container {
          transition: none;
        }
      }
    </style>
    <script type="module" src="/src/main.js"></script>
  </head>
  <body>
    <!-- Vue 应用挂载点 -->
    <div id="app"></div>
  </body>
</html>
